import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { LiTabsTitle } from '../../../components/liTabsTitle/index'
import './index.scss'



export default class TopNav extends Component {
    constructor(props){
        super(props)
        this.state={
            seachWordInput: 'Chanel', //死数据，调用接口时需置空
            className: '',
            tabList: [
                {index: 0, title: '推荐'},
                {index: 1, title: '食品'},
                {index: 2, title: '美妆'},
                {index: 3, title: '母婴'},
                {index: 4, title: '家居'},
                {index: 5, title: '数码'},
            ],   //mock数据，调用接口时需置空
            current: 0,    //当前选中下标
            isReal: false,
            onChange: () => { }
        }
    }
    componentWillMount() {
        // this.getSearchWord()
      }
    // getSearchWord = async () => {
    // const { data: res } = await Tong.post({
    //     url: 'basedata-service/pub/keyword/list'
    // })
    // this.setState({ 
    //     seachWordInput: res.data.defaultKeyword
    //  })
    // }

    _onMsg = () => {
        // Tong.navTo({ url: '/pages/classify/index' })
    }
    _toSearch = () => {
        // Tong.toWebView(`/Session`)
    }
    _onClass = () => {
        // Tong.toWebView(`/Search`)
    }

    render() {
        const {
            state: { seachWordInput, tabList, current, onChange }
        } = this
        return (
            <View className='top-nav'>
                {/* 搜索框 */}
               <View className='top-nav-wrapper'>
                    <View className='top-nav-wrapper-search' onClick-={this._toSearch}>
                        {/* <LiIcon name='iconsousuo1' color='#222222' size='24'></LiIcon> */}
                            <Text className='top-nav-wrapper-search-text'>{seachWordInput}</Text>
                    </View>
                </View>
                {/* 消息图标 */}
                <View className='top-nav-wrapper-msg' onClick={this._onMsg}>
                    {/* <LiIcon name='iconxiaoxi-x' color='#222222' size='40'></LiIcon> */}
                </View>
                {/* 导航 */}
                <View className='top-nav-list'>
                    <View className='top-nav-list-item'>
                       <View className='top-nav-list-item-ul' scroll-x="true">
                           { this.state.tabList.map( (item,index) => {
                                return <View key={item + index} className={index == 0 ? 'top-nav-list-item-ul-current' : 'top-nav-list-item-ul-li' }>{item.title}</View>
                           })}
                        </View>      
                    </View>
                    <View className='top-nav-list-class' onClick={this._onClass}>
                        {/* <Image className='top-nav-list-class-img' src='https://img.gojoy.cn/h5/assets/home/nav-bg@2x.png'></Image> */}
                        {/* <LiIcon name='iconfenlei' color='#222222' size='37'></LiIcon> */}
                    </View>
                </View>
            </View>
        )
    }
}
